<script setup>
import { onMounted, onUnmounted } from "vue";
import router from "@/router/index";
import { _$, $, to } from "./index";

onMounted(() => {
  $.onSearch();
});

onUnmounted(() => {
  $.clean();
});
</script>

<template>
  <el-space direction="vertical" fill wrap class="w-fill" :size="20">
    <el-page-header @back="router.back()" size="small">
      <template #content>
        <span class="text-large font-600 mr-3">体检信息管理</span>
      </template>
    </el-page-header>
    <el-card class="w-fill" shadow="never">
      <div style="display: flex; justify-content: space-between">
        <el-form
          label-width="auto"
          :inline="true"
          :model="_$.query.requestParam"
          size="small"
          class="demo-form-inline"
        >
          <el-form-item label="搜索条件">
            <el-input v-model="_$.query.requestParam.condition" clearable />
          </el-form-item>
          <el-form-item>
            <el-space wrap>
              <el-button @click="$.onReset">重置</el-button>
              <el-button type="primary" @click="$.onSearch">查询</el-button>
            </el-space>
          </el-form-item>
        </el-form>
        <div>
          <el-button
            type="primary"
            size="small"
            @click="router.push('/portal/threshold')"
            >阈值设置</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="router.push('/portal/health-record/edit')"
            >新增</el-button
          >
        </div>
      </div>
    </el-card>

    <el-space wrap class="w-fill" :size="20">
      <el-card
        style="max-width: 480px"
        v-for="item in _$.query.responseParam.records"
        :key="'health-data-card' + item.id"
        shadow="hover"
      >
        <template #header>
          <div class="card-header">
            <div style="display: flex; justify-content: space-between">
              <p>
                <span>体检记录：</span>
                <el-text>
                  {{ item.measurementDate }}
                </el-text>
              </p>
              <el-button
                type="danger"
                icon="delete"
                size="small"
                link
                @click="$.onDelete(item.id)"
              >
              </el-button>
            </div>
          </div>
        </template>
        <el-descriptions title="基本信息" :column="3">
          <template #title>
            BMI:

            <el-text
              type="danger"
              v-if="
                item.weight / (item.height * item.height) < 18.5 ||
                item.weight / (item.height * item.height) > 27.9
              "
              >{{
                parseFloat(item.weight / (item.height * item.height)).toFixed(1)
              }}</el-text
            >
            <el-text
              type="warning"
              v-else-if="item.weight / (item.height * item.height) > 24.9"
              >{{
                parseFloat(item.weight / (item.height * item.height)).toFixed(1)
              }}</el-text
            >
            <el-text type="success" v-else>{{
              parseFloat(item.weight / (item.height * item.height)).toFixed(1)
            }}</el-text>
          </template>
          <el-descriptions-item label="用户">
            {{ item.userId }}
          </el-descriptions-item>
          <el-descriptions-item label="低血压(mmHg)">
            {{ item.title }}
          </el-descriptions-item>
          <el-descriptions-item label="空腹血糖(mmol/L)">
            {{ item.fastingBloodSugar }}
          </el-descriptions-item>
          <el-descriptions-item label="心率(次/分钟)">
            {{ item.heartRate }}
          </el-descriptions-item>
          <el-descriptions-item label="身高(m)">
            {{ item.height }}
          </el-descriptions-item>
          <el-descriptions-item label="脉搏(次/每分钟)">
            {{ item.pulse }}
          </el-descriptions-item>
          <el-descriptions-item label="高血压(mmol/L)">
            {{ item.systolicBloodPressure }}
          </el-descriptions-item>
          <el-descriptions-item label="腰围(cm)">
            {{ item.waistCircumference }}
          </el-descriptions-item>
          <el-descriptions-item label="体重(kg)">
            {{ item.weight }}
          </el-descriptions-item>
          <el-descriptions-item label="测量时间">
            {{ item.measurementDate }}
          </el-descriptions-item>
        </el-descriptions>
        <template #footer>
          <el-button
            size="small"
            type="info"
            @click="router.push('/portal/health-record/edit?id=' + item.id)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="success"
            @click="$.onDownload(item.healthFile)"
            >体检文件下载</el-button
          >
        </template>
      </el-card>
    </el-space>
  </el-space>
</template>

<style scoped></style>
